<template>
    <div class="ordering">
        <div>
        <el-page-header>
            <template #breadcrumb>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'companyhome' }">
                        企业主页
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>企业信息管理</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </el-page-header>
    </div><br/>
        <div class="heading">企业老师信息展示</div>
        <el-divider />
        <div>
            <el-table :data="tableData" style="width: 100%" height="300">
                <el-table-column fixed prop="teacherId" label="工号" min-width="100" />
                <el-table-column prop="teacherName" label="姓名" min-width="100" />
                <el-table-column prop="teacherSex" label="性别" min-width="100" />
                <el-table-column prop="teacherPhone" label="联系电话" min-width="100" />
                <el-table-column prop="companyName" label="所属企业" min-width="100" />
                <el-table-column prop="companyTrade" label="所属行业" min-width="100" />
            </el-table>
            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="企业教师信息文件档案上传" name="first">
                        <el-upload class="upload-demo" drag action="http://localhost:8080/company/import_teacher"
                            :show-file-list="false" multiple :on-success="uploadFileHandler"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler" :data=token>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!--     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="上传提示" name="second">
                        <el-text class="mx-1" size="large">
                            1. 文件的上传应选择excel表格形式，表格列应与要求中一致；
                        </el-text>
                        <br/>
                        <el-text class="mx-1" size="large">
                            2. 表格上传一次最多上传一个文件，后文件会覆盖前文件的内容，请谨慎上传；
                        </el-text>
                        <br/>
                        <el-text class="mx-1" size="large">
                            3. 请认真核对表格信息后上传，上传后只能覆盖不能修改信息。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="third">
                        <el-text class="mx-1" size="large">
                            1. 系统加载缓慢，上传后展示列表不显示信息。
                                解决方案： 请尽快联系维护员。
                        </el-text>
                        <br/>
                        <el-text class="mx-1" size="large">
                            2. 文件上传失败的可能性
                                文件过大或者文件的格式不对。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="系统维护员联系" name="fourth">
                        <el-descriptions title="维护员">
                            <el-descriptions-item label="姓名：">殷凡卓</el-descriptions-item>
                            <el-descriptions-item label="联系电话：">18100000000</el-descriptions-item>
                            <el-descriptions-item label="办公地址：">中原校区 基础实验楼102</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, toRefs,onBeforeUnmount,reactive } from 'vue'
import requests from '@/api/ajax.js'
import { genFileId } from 'element-plus'

  
const token =ref({
    token:''
});
token.value.token=localStorage.getItem('user') // 替换为自己的 token
//console.log("++"+token.value);
// token.value = 'Bearer'+ token .value;
console.log("++"+token.value);

/* const url1 = "http://localhost:8080/excel/import_PracticeCourse/test?token=" + token.value
console.log("++" + url1)
 */

/* console.log(token); */
const tableData = ref([{
    teacherId:'',
    teacherName: '',
    teacherSex: '',
    teacherPhone: '',
    companyId: '',
    companyName: '',
    companyInfo: '',
    companyPhone: '',
    companyTrade: '',
    companyPassword: '',
}])

onBeforeMount(() => {

    //请求学生信息
    const aacom = requests({ url: "/excel/allOuterTeacherDetail", method: "get", }).then(res => {
        //存储信息到浏览器toke
        const abc = res.rdata
        tableData.value = abc
        console.log(res)
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });
})






function uploadFileHandler(res) {
    console.log(res)
    
    setTimeout(() => {
        this.loading.close();
        if (res.code == 201) {
            this.$message.error(res.msg)
        } else {
            this.$message.success(res.msg)
        }

    }, 1000);
}
function uploadFileErrorHandler(res) {
    this.$message.error("上传失败,请检查网络连接")
}
function uploadFileOnProgressHandler(res) {
    // this.$message("上传中...")
    this.fullScreenLoading()
}
function fullScreenLoading() {
    this.loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });

}

</script>


<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.file {
    position: relative;
    display: inline-block;
    background: #133d63;
    border: 0.1rem solid #99d3f5;
    border-radius: 0.2rem;
    padding: 0.2rem 0.6rem;
    overflow: hidden;
    color: #f0faff;
    text-decoration: none;
    text-indent: 0;
    line-height: 1.5rem;
    font-size: 0.8rem;
    margin-left: 7rem;
}

.file input {
    position: absolute;
    font-size: 0.8rem;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
}
</style>